@import (reference) 'config';
@import (reference) '../../../app/less/classes';
@import (reference) 'icons';

.get-started {
  &-btnLink { // .get-started-btnLink
    width: 100%;
    background: @color-white;
    border-radius: @border-radius;
    margin-bottom: 10px;

    &-content {
      height: 42px;
      padding: 0 15px 0 60px;
      display: flex;
      flex-direction: column;
      align-items: start;
      text-align: left;
      justify-content: center;
      box-shadow: 0 1px 4px 0 rgba(58, 78, 136, 0.1);
      color: @color-basic-900;
      font-size: 15px;
      position: relative;
      transition: box-shadow 0.3s;

      &::before {
        content: '';
        width: 14px;
        height: 14px;
        position: absolute;
        right: 20px;
        background: @dex-arrow-right-icon;
        transition: all 0.3s;
      }
    }

    &-description {
      display: none;
      font-size: 13px;
      color: @color-basic-500;
    }

    &-icon {
      width: 24px;
      height: 24px;
      position: absolute;
      left: 20px;
    }

    &:hover & {
      &-content {
        box-shadow: 0 2px 10px 0 rgba(58, 78, 136, 0.1);

        &::before {
          background: @dex-arrow-right-hover-icon;
          right: 15px;
        }
      }
    }
  }
}

.or {
  text-transform: uppercase;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  margin-top: 20px;
  margin-bottom: 20px;

  &::before, &::after {
    content: '';
    display: inline-block;
    height: 0;
    border-bottom: 1px solid @color-info-100;
    width: 100%;
  }

  &::before {
    margin: 0 10px 0 0;
  }

  &::after {
    margin: 0 0 0 10px;
  }
}

@media screen and (min-width: 480px) {
  .get-started-btnLink {
    &-content {
      height: 52px;
    }

    &-description {
      display: block;
    }
  }
}